{{ define "body" }}


<section class="container" show="{{ .HasMetaHead }}">
    <div class="columns">
        <h1>{{ .Title }}</h1>
    </div>
    <div class="columns prb-1">
        <div class="column col-9 d-flex flex-bottom">
            {{ range $tag := .ArticleTags }}
            <span class="chip"><a href="/tag/{{ $tag }}">{{ $tag }}</a></span>
            {{ end }}
        </div>
        <div class="column col-3 d-flex flex-right flex-bottom prx-075">
            {{ if ne .UpdateAt "" }}
            <span class="d-flex" title="最后编辑于：{{ .UpdateAt }}">{{ .UpdateFromNow }}</span>
            {{ end }}
        </div>
    </div>
</section>

<article>
    <header>
        <div class="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700">
            <dl>
                <div>
                    <dt class="sr-only">Published on</dt>
                    <dd class="text-base font-medium h-12 leading-6 text-gray-500 dark:text-gray-400">
                        <span class="pb-6">
                            更新于：{{ .UpdateFromNow }}
                        </span>
                    </dd>
                </div>
            </dl>
            <div>
                <h1
                    class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
                    {{ .Title }}
                </h1>
            </div>
        </div>
    </header>

    <div class="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0 "
        style="grid-template-rows: auto 1fr;">
        <div class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
            <div class="prose max-w-none pt-10 pb-8 dark:prose-dark">
                {{ .Article }}
            </div>
        </div>
    </div>
</article>

<!--  -->

<details open="">
    <summary class="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary>
    <div class="ml-6">
        <ul>
            <li class="false"><a href="#overview">Overview</a></li>
            <li class="false"><a href="#theme-colors">Theme colors</a></li>
            <li class="false"><a href="#xdm-mdx-compiler">Xdm MDX compiler</a></li>
            <li class="false"><a href="#table-of-contents-component">Table of contents component</a></li>
            <li class="false"><a href="#layouts">Layouts</a></li>
            <li class="ml-6"><a href="#adding-new-templates">Adding new templates</a></li>
            <li class="ml-6"><a href="#configuring-a-blog-post-frontmatter">Configuring a blog post frontmatter</a></li>
            <li class="ml-6"><a href="#extend">Extend</a></li>
            <li class="false"><a href="#analytics">Analytics</a></li>
            <li class="false"><a href="#blog-comments-system">Blog comments system</a></li>
            <li class="false"><a href="#multiple-authors">Multiple authors</a></li>
            <li class="ml-6"><a href="#multiple-authors-in-blog-post">Multiple authors in blog post</a></li>
            <li class="false"><a href="#copy-button-for-code-blocks">Copy button for code blocks</a></li>
            <li class="false"><a href="#line-highlighting-and-line-numbers">Line highlighting and line numbers</a></li>
            <li class="false"><a href="#newletter-component-v113">Newletter component (v1.1.3)</a></li>
            <li class="false"><a href="#bibliography-and-citations-v121">Bibliography and Citations (v1.2.1)</a></li>
            <li class="false"><a href="#self-hosted-font-v150">Self-hosted font (v1.5.0)</a></li>
            <li class="false"><a href="#upgrade-guide">Upgrade guide</a></li>
        </ul>
    </div>
</details>

<!-- 文章内容 -->
<section class="container">
    <div class="columns is-gapless">
        <div class="column col-xl-auto">
            <article class="content mx-1">
                {{ .Article }}
            </article>
        </div>
    </div>
</section>



<!-- 目录 -->
<section class="container hide-xs hide-sm">
    <div class="toc" hidden>
        <div class="panel toc-content">
            <div class="panel-header">
                <div class="panel-title">目 录</div>
            </div>
            <div class="panel-body">
                <ul>
                    {{ range $item := .TOC }}
                    <li><a class="plx-{{ $item.Level }}" href="#{{ $item.ID }}">{{ $item.Text }}</a></li>
                    {{ end }}
                </ul>
            </div>
        </div>
    </div>
</section>


<!-- 浮动控制按钮 -->
<div class="float-ctl hide-xs hide-sm">
    <button class="btn my-1" onclick="toggleTOC()">
        <i class="icon icon-menu"></i>
    </button>
    <button class="btn my-1" onclick="backToTop()">
        <i class="icon icon-upward"></i>
    </button>
</div>

<!-- 手机端，浮动控制按钮 -->
<div id="float-mobile-ctl" class="show-xs show-sm hide-md hide-lg hide-xl">
    <div class="float-mobile-ctl mrx-1">
        <button class="btn mx-1" onclick="toggleTOC()">
            <i class="icon icon-menu"></i>
        </button>
        <button class="btn mx-1" onclick="backToTop()">
            <i class="icon icon-upward"></i>
        </button>
    </div>
</div>


<div class="modal" id="modal-id">
    <div class="modal-container">
        <div class="modal-header">
            <a href="#close" class="btn btn-clear float-right" onclick="closeMobileTOC()"></a>
            <div class="modal-title h5">目 录</div>
        </div>
        <div class="modal-body">
            <div class="content">
                <ul>
                    {{ range $item := .TOC }}
                    <li><a class="my-4 plx-{{ $item.Level }}" href="#{{ $item.ID }}" onclick="closeMobileTOC()">{{
                            $item.Text }}</a></li>
                    {{ end }}
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/util.js"></script>

{{ end }}